<!--   横向滚动文字  -->
<template>
  <div id="scroll_div" class="fl">
    <div id="scroll_begin">
      <span class="img">
        <img src="../assets/img/inform.gif" alt />
      </span>
      <span class="pad_right">{{list}}</span>
      <span class="img">
        <img src="../assets/img/inform.gif" alt />
      </span>
      <span class="pad_right">{{list}}</span>
      <span class="img">
        <img src="../assets/img/inform.gif" alt />
      </span>
      <span class="pad_right">{{list}}</span>
      <span class="img">
        <img src="../assets/img/inform.gif" alt />
      </span>
      <span class="pad_right">{{list}}</span>
      <span class="img">
        <img src="../assets/img/inform.gif" alt />
      </span>
      <span class="pad_right">{{list}}</span>
      <span class="img">
        <img src="../assets/img/inform.gif" alt />
      </span>
      <span class="pad_right">{{list}}</span>
      <span class="img">
        <img src="../assets/img/inform.gif" alt />
      </span>
      <span class="pad_right">{{list}}</span>
      <span class="img">
        <img src="../assets/img/inform.gif" alt />
      </span>
      <span class="pad_right">{{list}}</span>
    </div>
    <div id="scroll_end"></div>
  </div>
</template>
<script>
export default {
  name: "Marquee",
  props: ["lists", "lwidth"], // 父组件传入数据， 数组形式 [ "连雨不知春去"，"一晴方觉夏深"]
  data() {
    return {
      text: true, // 数组文字转化后的字符串
      width_s: this.lwidth,
      list: this.lists //滚动文字
    };
  },
  methods: {
    move() {
      let that = this;
      let speed = 50;
      var scroll_begin = document.getElementById("scroll_begin");
      var scroll_end = document.getElementById("scroll_end");
      var scroll_div = document.getElementById("scroll_div");
      scroll_end.innerHTML = scroll_begin.innerHTML;
      function Marquee() {
        if (scroll_end.offsetWidth - scroll_div.scrollLeft <= 0)
          scroll_div.scrollLeft -= scroll_begin.offsetWidth;
        else scroll_div.scrollLeft++;
      }
      Marquee();
      scroll_div.onmouseover = function() {
        that.text = false;
      };
      scroll_div.onmouseout = function() {
        that.text = true;
        setTimeout(that.move, speed);
      };
      if (that.text) {
        setTimeout(that.move, speed);
      }
    }
  },
  // 把父组件传入的arr转化成字符串
  mounted: function() {
    this.move();
  },
  updated() {
    // this.move();
  },
  //监听
  watch: {
    lwidth(newval) {
      this.width_s = newval;
    },
    lists(newval) {
      console.log(newval);
      if (newval) {
        this.list = newval;
        this.text = this.list[0];
      }
    }
  }
};
</script>
<style scoped>
.pad_right {
  padding-right: 2em;
}
#scroll_div {
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#scroll_begin,
#scroll_end {
  display: flex;
}
.img {
  display: flex;
  width: 30px;
  height: 30px;
  justify-content: center;
  align-items: center;
}
.img img {
  display: block;
  width: 20px;
  height: 20px;
}
</style>